
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scals=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue基础</title>
</head>

<body>


<div id="app">
    <input type="text" placeholder="请输入地区名称" v-model="city" @keyup.enter="searchWeather">
    <button @click="searchWeather">搜索天气</button>
    <div>
        <a @click="changeCity('天津')">天津</a>
        <a @click="changeCity('武汉')">武汉</a>
        <a @click="changeCity('杭州')">杭州</a>
        <a @click="changeCity('南昌')">南昌</a>
        <a @click="changeCity('深圳')">深圳</a>
        <a @click="changeCity('南宁')">南宁</a>
    </div>
    <ul>
        <li style="list-style: none;" v-for="item in forecast">
            <span>{{item.date}}</span>
            <a>{{item.high}}</a>
            <a>{{item.fengli}}</a>
            <a>{{item.low}}</a>
            <a>{{item.fengxiang}}</a>
        </li>
    </ul>
</div>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./main.js"></script>


<script>

    var app = new Vue({
        el:"#app",
        data:{
            city:"",
            forecast:[]
        },
        methods:{
            searchWeather:function(){
                if(this.city.length == 0){
                    alert("请输入城市");
                    return;
                }
                var that = this;
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
                    .then(function(response){
                        console.log(response.data.data.forecast);
                        that.forecast = response.data.data.forecast;
                    })
                    .catch(function(error){
                        alert("请求失败 " + error);
                    })
            },
            changeCity:function(city){
                this.city = city;
                this.searchWeather();
            }
        }
    })

</script>
</body>

</html>

